<template>
  <div>
    <course-base :couseInfo="couserList"></course-base>
    <div class="con-wrap">
      <dir-com :fdirList="dirList"></dir-com>
      <add-video></add-video>
      <div class="concover" v-if="!$route.query.ID"></div>
    </div>
    <div class="editor_wrap">
      <div style="border: 1px solid #ccc;">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 300px; overflow-y: hidden;"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />
        <el-button type="success" @click="save">全部保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import courseBase from './courseBase.vue'
import dirCom from './dirCom.vue'
import addVideo from './addVideo'
import { _getCourse, _getCourseDir, _saveAll } from '../../api/courseadd.js'

export default {
  data () {
    return {
      couserList: {},
      dirList: [],
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default' // or 'simple'
    }
  },
  components: {
    courseBase,
    dirCom,
    addVideo,
    Editor,
    Toolbar
  },
  methods: {
    // 整体保存课程接口
    async save () {
      console.log(this.html)
      var res = await _saveAll({
        Cname: this.couserList.Cname,
        _id: this.couserList._id,
        Cdescribe: this.couserList.Cdescribe,
        Cprice: this.couserList.Cprice,
        CategoryOne: this.couserList.CategoryOne,
        CategoryTwo: this.couserList.CategoryTwo,
        CategoryThree: this.couserList.CategoryThree,
        Cpic: this.couserList.Cpic,
        Cdetails: this.html
      })
      console.log(res)
      this.$message.success('保存成功')
      this.$router.push({ name: 'courselist' })
    },
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    getDir () {
      // 获取课程下目录接口
      _getCourseDir(this.$route.query.ID).then(res => {
        console.log(res)
        this.dirList = res.data.list
      })
    }
  },
  created () {
    // 如果地址栏中有课程ID 获取课程基本信息
    if (this.$route.query.ID) {
      _getCourse(this.$route.query.ID).then(res => {
        console.log(res)
        this.couserList = res.data.courselist //课程基本信息
      })
      this.getDir()
    }
  }
}
</script>
<style lang="less">
.con-wrap {
  width: 80%;
  margin: 30px auto;
  display: flex;
  height: 400px;
  overflow: auto;
  justify-content: space-between;
  position: relative;
  .concover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
}
.editor_wrap {
  width: 80%;
  margin: 0 auto;
}
</style>
